<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('头像上传')"></head>
<body id="app-container" class="menu-default show-spinner vertical boxed">

<nav th:replace="_fragments :: nav"></nav>

<div th:replace="_fragments :: menu(2, 5)"></div>

<main>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="mb-2">
                    <h1>Blog</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="#">主页</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">个人中心</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">头像上传</li>
                        </ol>
                    </nav>
                </div>
                <div class="separator mb-5"></div>
            </div>
        </div>

        <div class="card mb-4">

            <div class="card-body">
                <h5 class="mb-4">头像上传-点击下面图片换头像</h5>
                <form id="formUpload" th:action="@{/file/fileUpload}" method="post" enctype="multipart/form-data">
                        <div class="d-flex  align-items-center">
                            <img id="avatar_img"  th:src="${session.account.accountProfilePhoto}"  width="100px" height="100px" onclick="$('#fileInput').click()">
                            <input id="fileInput" name="file" type="file" style="display: none">
                        </div>
                        <div class="d-flex justify-content-end align-items-center">
                            <button id="imgUpload" class="btn btn-primary btn-lg" type="button">保存
                            </button>
                        </div>
                    </form>
            </div>
        </div>


    </div>


</main>

<footer th:replace="_fragments :: footer"></footer>

<th:block th:replace="_fragments :: script" />
<script th:src="@{/js/pictureUpload.js}"></script>

</body>
</html>